<template>
  <div>
    <van-cell-group>
      <van-cell :title-style="{fontWeight:'bold'}" title="我的团队"></van-cell>
    </van-cell-group>

    <van-row class="coupon_status">
      <van-col span="8" @click="showMonthSaleList">
        <div class="mount">{{teamData.monthTotal}}</div>
        <div class="title">月销售额</div>
      </van-col>
      <van-col span="8" @click="showPeopleTeamList">
        <div class="mount">{{teamData.peopleTeam}}</div>
        <div class="title">团队人数</div>
      </van-col>
      <van-col span="8" @click="showMyTocashList">
        <div class="mount">{{teamData.myTocash}}</div>
        <div class="title">我的提现</div>
      </van-col>
    </van-row>

    <!--我的团队列表-->
    <van-popup v-model="peopleTeam.show" :style="{height:'80%'}" close-icon="cross" closeable position="bottom">
      <van-list v-model="peopleTeam.loading" :finished="peopleTeam.finished" loading-text="加载中..." finished-text="没有更多了" @load="loadPeopleTeam">

        <van-cell v-for="(item,index) in peopleTeam.list" :key="index">
          <p>我的伙伴：{{item.username}}</p>
        </van-cell>
      </van-list>
    </van-popup>
    <!--我的团队列表End-->
    <!--我的月销售列表-->
    <van-popup v-model="monthTotal.show" :style="{height:'80%'}" close-icon="cross" closeable position="bottom">
      <van-list v-model="monthTotal.loading" :finished="monthTotal.finished" loading-text="加载中..." finished-text="没有更多了" @load="loadMonthTotal">

        <van-cell v-for="(item,index) in monthTotal.list" :key="index">
          <p>月销售：月销售明细{{index}}--{{item.price}}</p>
        </van-cell>
      </van-list>
    </van-popup>
    <!--我的月销售列表End-->
    <!--我的提现列表-->
    <van-popup v-model="myTocash.show" :style="{height:'80%'}" close-icon="cross" closeable position="bottom">
      <van-list v-model="myTocash.loading" :finished="myTocash.finished" loading-text="加载中..." finished-text="没有更多了" @load="loadMyTocashList">

        <van-cell v-for="(item,index) in myTocash.list" :key="index">
          <p>提现：提现数据{{index}}--{{item.price}}</p>
        </van-cell>
      </van-list>
    </van-popup>
    <!--我的提现列表End-->
  </div>
</template>

<script>
import { Row, Col, Popup, List } from 'vant';
import { qryBuddy } from '@/api/api';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
    [List.name]: List
  },
  props: {
    teamData: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      peopleTeam: {
        show: false,
        loading: false,
        finished: false,
        searchParam: {
          page: 1, size: 10
        },
        list: []
      },
      monthTotal: {
        show: false,
        loading: false,
        finished: false,
        searchParam: {
          page: 1, size: 10
        },
        list: [{ score: 1 }]
      },
      myTocash: {
        show: false,
        loading: false,
        finished: false,
        searchParam: {
          page: 1, size: 10
        },
        list: [{ score: 1 }]
      },
    }
  },
  methods: {
    showAndCloseOther (key) {
      this.myTocash.show = false;
      this.monthTotal.show = false;
      this.peopleTeam.show = false;
      this[key].show = true;
    },
    // 团队人数
    showPeopleTeamList () {
      this.peopleTeam.searchParam = { page: 1, size: 10 };
      this.showAndCloseOther('peopleTeam');
    },
    loadPeopleTeam () {
      // 用this.peopleTeam.searchParam 去查询数据，查询成功后及时的讲分页参数赋值到该对象内
      let { page, size } = this.peopleTeam.searchParam;
      this.peopleTeam.loading = true; // 查询时开启loading
      qryBuddy({ pageNo: page, pageSize: size }).then(res => {
        console.log(res.data, "----------");
        let { list } = this.peopleTeam;
        list.push(...res.data.result.records);
        this.peopleTeam.searchParam.page++;
        this.peopleTeam.loading = false; // 完成后关闭loading
        if (res.data.result.records.length < size) {
          this.peopleTeam.finished = true; // 如果以及查完则设置true
        }
      })

      // let { list } = this.peopleTeam;
      // this.peopleTeam.loading = true; // 查询时开启loading
      // for (let i = list.length; i < page * size; i++) {
      //   // list.push({ score: Math.random() })
      // }
      // this.peopleTeam.searchParam.page++;
      // this.peopleTeam.loading = false; // 完成后关闭loading
      // this.peopleTeam.finished = true; // 如果以及查完则设置true
    },
    // 团队人数End
    // 月销售额
    showMonthSaleList () {
      this.monthTotal.searchParam = { page: 1, size: 10 };
      this.showAndCloseOther('monthTotal');
    },
    loadMonthTotal () {
      // 用this.monthTotal.searchParam 去查询数据，查询成功后及时的讲分页参数赋值到该对象内
      let { page, size } = this.monthTotal.searchParam;
      let { list } = this.monthTotal;
      this.monthTotal.loading = true; // 查询时开启loading
      for (let i = list.length; i < page * size; i++) {
        // list.push({ price: Math.random() })
      }
      this.monthTotal.searchParam.page++;
      this.monthTotal.loading = false; // 完成后关闭loading
      this.monthTotal.finished = true; // 如果以及查完则设置true
    },
    // 月销售额End
    // 我的提现
    showMyTocashList () {
      this.myTocash.searchParam = { page: 1, size: 10 };
      this.showAndCloseOther('myTocash');
    },
    loadMyTocashList () {
      // 用this.myTocash.searchParam 去查询数据，查询成功后及时的讲分页参数赋值到该对象内
      let { page, size } = this.myTocash.searchParam;
      let { list } = this.myTocash;
      this.myTocash.loading = true; // 查询时开启loading
      for (let i = list.length; i < page * size; i++) {
        // list.push({ price: Math.random() })
      }
      this.myTocash.searchParam.page++;
      this.myTocash.loading = false; // 完成后关闭loading
      this.myTocash.finished = true; // 如果以及查完则设置true
    },
    // 我的提现End
  }
};
</script>
<style lang="scss" scoped>
.van-row {
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
}
.mount,
.title {
  text-align: center;
}
.mount {
  margin-bottom: 12px;
  color: #ff4d3b;
}
</style>